<template>
  <el-container>
    <el-aside width="100">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item-group>
            <template #title><span>用户</span></template>
            <el-menu-item index="1-1">权限管理</el-menu-item> 
            <el-menu-item index="1-2">人员管理</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <template #title><span>工人</span></template>
            <el-menu-item index="1-3">洗车工</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title><span>技术</span></template>
            <el-menu-item index="1-4-1">前端</el-menu-item>
            <el-menu-item index="1-4-2">后端</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <h1 @click="isCollapse = !isCollapse">Header</h1>
      </el-header>
      <el-main>
        <el-button @click="han">推出登录</el-button>
        <el-button @click="click">发送get</el-button>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { Location } from "@element-plus/icons-vue";
import { reactive, ref, shallowRef } from "vue";
import { useRouter } from "vue-router";
import { userInfoStore } from "@/store";
import { getServer } from "@/utlis/request";
import Table from "./vxeTable.vue";
import useLoading from "../../hooks/useLoading";
const shallowValue = shallowRef({
  count: 20,
});
const params = ref({
  a: 1,
  b: 2,
});
const arr = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const router = useRouter();
const userInfo = userInfoStore();
const isCollapse = ref(true);
const tableRef = ref(null);
const changeCheckbox = (params) => {
  console.log(params, "获取选中的数据");
};

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
const click = () => {
  getServer("/456", { a: 1, b: 2 });
};
const han = () => {
  localStorage.removeItem("token");
  userInfo.setToken(null);
  router.replace("/login");
};
const getList = async () => {
  return [
    {
      id: 10001,
      name: "Test1",
      role: "Develop",
      sex: "Man",
      age: 28,
      address: "test abc",
    },
    {
      id: 10002,
      name: "Test2",
      role: "Test",
      sex: "Women",
      age: 22,
      address: "Guangzhou",
    },
    {
      id: 10003,
      name: "Test3",
      role: "PM",
      sex: "Man",
      age: 32,
      address: "Shanghai",
    },
    {
      id: 10004,
      name: "Test4",
      role: "Designer",
      sex: "Women",
      age: 24,
      address: "Shanghai",
    },
  ];
};
const tableData = setTimeout(() => {
  console.log(tableData.value); 
});
const handleCheckboxChange = (params) => {
  // console.log((params.records[0].age = 60));
  console.log(params, "获取选中的数据");
};
</script>
<style scoped>
.el-container {
  height: 100%;
}
.el-menu-vertical-demo {
  height: 100%;
}
</style>
